<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>博客首页</title>
  <style>
    .blog_container{
      padding: 0;
      width: 90%;
      margin: auto;
    }
    .blog_container li{
      list-style: none;
      border-bottom:1px solid #666666;
      margin-top: 20px;
    }
    .blog_container .blog_title{
      font-weight: bold;
      font-size: 20px;
      font-family: 'Times New Roman', Times, serif;
    }
    .blog_container .blog_content{
      color: #999999;
    }
    .blog_container .blog_info .tag{
      
      color: white;
      border-radius: 5px;
      padding: 3px 5px;
    }
  </style>
</head>
<body>
    {{include './header.html'}}
    <!-- 模板 -->
    {{if blogs.length!=0}}
      <ul class="blog_container">
        {{each blogs item i}}
          <li data-id='{{item._id}}'>
            <a href='/blog_detail?id={{item._id}}&title={{item.title}}'>
               <p class="blog_title">{{item.title}}</p>
                <p class="blog_content">{{item.content.length<15?item.content:item.content.substr(0,15)+'...'}}</p>
                <p class="blog_info">
                  <span>作者：{{item.author.account}}</span> |
                  <span>时间：{{item.times}}</span> |
                  {{each item.tags tag i}}
                   <span class="tag">{{tag}}</span>
                  {{/each}}
                  <!-- <span class="tag">{{item.tag}}</span> -->
                </p>
                <p class="blog_num">
                  <span>阅读次数：{{item.readNum||0}}</span> | 
                  <span>回复：{{item.reply.length}}</span>
                </p>
            </a>  
          </li>
        {{/each}}
      </ul>
      <script>
            // console.log($('li'))
            //  $('.blog_container li').click(function(event) {
            //    console.log(1)
            //   var id = $(this).attr('data-id')
            //   var title = $(this).find('.blog_title').text()
            //   $.get('/blog_detail?id='+id+'&title='+title,(data)=>{})
            //   })
          </script>
    {{else}}
      <p>当前您还没有发布任何博客信息，请尽快发布</p>
    {{/if}}
    <script>
      $('.tag').css('background-color',`HSL(${Math.floor(Math.random()*361)},60%,80%)`)
     
    </script>
</body>
</html>